<script setup lang="ts">
const departmentData = [
  {
    "id": 1,
    "name": "总公司",
    "code": "001",
    "parent_id": 0,
    "status": 1,
    "create_time": "2025-06-08T00:00:00",
    "update_time": "2025-06-08T00:00:00",
    "children": [
      {
        "id": 2,
        "name": "人力资源部",
        "code": "HR001",
        "parent_id": 1,
        "status": 1,
        "create_time": "2025-06-08T00:00:00",
        "update_time": "2025-06-08T00:00:00"
      },
      {
        "id": 3,
        "name": "财务部",
        "code": "FIN001",
        "parent_id": 1,
        "status": 1,
        "create_time": "2025-06-08T00:00:00",
        "update_time": "2025-06-08T00:00:00"
      },
      {
        "id": 4,
        "name": "研发部",
        "code": "DEV001",
        "parent_id": 1,
        "status": 1,
        "create_time": "2025-06-08T00:00:00",
        "update_time": "2025-06-08T00:00:00",
        "children": [
          {
            "id": 5,
            "name": "技术支持部",
            "code": "SUPP001",
            "parent_id": 4,
            "status": 1,
            "create_time": "2025-06-08T00:00:00",
            "update_time": "2025-06-08T00:00:00"
          }
        ]
      },
      {
        "id": 6,
        "name": "销售部",
        "code": "SALES001",
        "parent_id": 1,
        "status": 1,
        "create_time": "2025-06-08T00:00:00",
        "update_time": "2025-06-08T00:00:00",
        "children": [
          {
            "id": 7,
            "name": "市场部",
            "code": "MARK001",
            "parent_id": 6,
            "status": 1,
            "create_time": "2025-06-08T00:00:00",
            "update_time": "2025-06-08T00:00:00"
          }
        ]
      },
      {
        "id": 8,
        "name": "行政部",
        "code": "ADMIN001",
        "parent_id": 1,
        "status": 0,
        "create_time": "2025-06-08T00:00:00",
        "update_time": "2025-06-08T00:00:00"
      },
      {
        "id": 8,
        "name": "行政部",
        "code": "ADMIN001",
        "parent_id": 1,
        "status": 0,
        "create_time": "2025-06-08T00:00:00",
        "update_time": "2025-06-08T00:00:00"
      },
      {
        "id": 8,
        "name": "行政部",
        "code": "ADMIN001",
        "parent_id": 1,
        "status": 0,
        "create_time": "2025-06-08T00:00:00",
        "update_time": "2025-06-08T00:00:00"
      }
    ]
  },
  {
    "id": 1,
    "name": "总公司",
    "code": "001",
    "parent_id": 0,
    "status": 1,
    "create_time": "2025-06-08T00:00:00",
    "update_time": "2025-06-08T00:00:00",
    "children": [
      {
        "id": 2,
        "name": "人力资源部",
        "code": "HR001",
        "parent_id": 1,
        "status": 1,
        "create_time": "2025-06-08T00:00:00",
        "update_time": "2025-06-08T00:00:00"
      },
      {
        "id": 3,
        "name": "财务部",
        "code": "FIN001",
        "parent_id": 1,
        "status": 1,
        "create_time": "2025-06-08T00:00:00",
        "update_time": "2025-06-08T00:00:00"
      },
      {
        "id": 4,
        "name": "研发部",
        "code": "DEV001",
        "parent_id": 1,
        "status": 1,
        "create_time": "2025-06-08T00:00:00",
        "update_time": "2025-06-08T00:00:00",
        "children": [
          {
            "id": 5,
            "name": "技术支持部",
            "code": "SUPP001",
            "parent_id": 4,
            "status": 1,
            "create_time": "2025-06-08T00:00:00",
            "update_time": "2025-06-08T00:00:00"
          }
        ]
      },
      {
        "id": 6,
        "name": "销售部",
        "code": "SALES001",
        "parent_id": 1,
        "status": 1,
        "create_time": "2025-06-08T00:00:00",
        "update_time": "2025-06-08T00:00:00",
        "children": [
          {
            "id": 7,
            "name": "市场部",
            "code": "MARK001",
            "parent_id": 6,
            "status": 1,
            "create_time": "2025-06-08T00:00:00",
            "update_time": "2025-06-08T00:00:00"
          }
        ]
      },
      {
        "id": 8,
        "name": "行政部",
        "code": "ADMIN001",
        "parent_id": 1,
        "status": 0,
        "create_time": "2025-06-08T00:00:00",
        "update_time": "2025-06-08T00:00:00"
      },
      {
        "id": 8,
        "name": "行政部",
        "code": "ADMIN001",
        "parent_id": 1,
        "status": 0,
        "create_time": "2025-06-08T00:00:00",
        "update_time": "2025-06-08T00:00:00"
      },
      {
        "id": 8,
        "name": "行政部",
        "code": "ADMIN001",
        "parent_id": 1,
        "status": 0,
        "create_time": "2025-06-08T00:00:00",
        "update_time": "2025-06-08T00:00:00"
      }
    ]
  },
  {
    "id": 1,
    "name": "总公司",
    "code": "001",
    "parent_id": 0,
    "status": 1,
    "create_time": "2025-06-08T00:00:00",
    "update_time": "2025-06-08T00:00:00",
    "children": [
      {
        "id": 2,
        "name": "人力资源部",
        "code": "HR001",
        "parent_id": 1,
        "status": 1,
        "create_time": "2025-06-08T00:00:00",
        "update_time": "2025-06-08T00:00:00"
      },
      {
        "id": 3,
        "name": "财务部",
        "code": "FIN001",
        "parent_id": 1,
        "status": 1,
        "create_time": "2025-06-08T00:00:00",
        "update_time": "2025-06-08T00:00:00"
      },
      {
        "id": 4,
        "name": "研发部",
        "code": "DEV001",
        "parent_id": 1,
        "status": 1,
        "create_time": "2025-06-08T00:00:00",
        "update_time": "2025-06-08T00:00:00",
        "children": [
          {
            "id": 5,
            "name": "技术支持部",
            "code": "SUPP001",
            "parent_id": 4,
            "status": 1,
            "create_time": "2025-06-08T00:00:00",
            "update_time": "2025-06-08T00:00:00"
          }
        ]
      },
      {
        "id": 6,
        "name": "销售部",
        "code": "SALES001",
        "parent_id": 1,
        "status": 1,
        "create_time": "2025-06-08T00:00:00",
        "update_time": "2025-06-08T00:00:00",
        "children": [
          {
            "id": 7,
            "name": "市场部",
            "code": "MARK001",
            "parent_id": 6,
            "status": 1,
            "create_time": "2025-06-08T00:00:00",
            "update_time": "2025-06-08T00:00:00"
          }
        ]
      },
      {
        "id": 8,
        "name": "行政部",
        "code": "ADMIN001",
        "parent_id": 1,
        "status": 0,
        "create_time": "2025-06-08T00:00:00",
        "update_time": "2025-06-08T00:00:00"
      },
      {
        "id": 8,
        "name": "行政部",
        "code": "ADMIN001",
        "parent_id": 1,
        "status": 0,
        "create_time": "2025-06-08T00:00:00",
        "update_time": "2025-06-08T00:00:00"
      },
      {
        "id": 8,
        "name": "行政部",
        "code": "ADMIN001",
        "parent_id": 1,
        "status": 0,
        "create_time": "2025-06-08T00:00:00",
        "update_time": "2025-06-08T00:00:00"
      }
    ]
  }
]
</script>

<template>
  <div class="w-full h-full flex flex-row gap-4 overflow-hidden">
    <!-- 左侧部门树 -->
    <div class="w-60 h-full bg-white rounded-lg">
      <div class="p-3 border-b border-gray-200 flex justify-between items-center">
        <el-input
          placeholder="搜索部门"
          clearable
        >
          <template #suffix>
            <svg-icon name="search" />
          </template>
        </el-input>
      </div>
      <div class="p-3 w-full h-[calc(100%-64px)] overflow-auto">
        <el-tree
          :data="departmentData"
          node-key="id"
          highlight-current
        >
          <template #default="{ node, data }">
              <span class="flex items-center">
                <span>{{ data.name }}</span>
                <span class="ml-2 text-xs text-gray-500">(50)</span>
              </span>
          </template>
        </el-tree>
      </div>
    </div>

    <!-- 右侧内容区 -->
    <div class="h-full w-[calc(100%-256px)] bg-white rounded-lg p-4 space-y-2">
      <div>
        <el-button>新增</el-button>
        <el-button>批量删除</el-button>
        <el-button>批量启用</el-button>
        <el-button>批量禁用</el-button>
        <el-button>筛选</el-button>
        <el-button>导入</el-button>
        <el-button>导出</el-button>
        <el-button>刷新</el-button>
      </div>
      <!-- 内容区域 -->
      <div class="w-full h-full">
        <el-table :data="departmentData">
          <el-table-column fixed prop="date" label="Date" width="100" />
          <el-table-column prop="name" label="Name" width="120" />
          <el-table-column prop="state" label="State" width="120" />
          <el-table-column prop="zip" label="Zip" width="120" />
          <el-table-column fixed="right" label="Operations" min-width="120">
            <template #default>
              <el-button link type="primary" size="small">
                Detail
              </el-button>
              <el-button link type="primary" size="small">Edit</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>
